<script lang="ts">
  import Title from "../../../components/Title/Title.svelte";
  import DeviceTarget from "../../../components/Device/DeviceTarget.svelte";
  import { DeviceStatus } from "../../../components/Device/type";
  import DeviceImg from "../../../components/Device/DeviceImg.svelte";
  import { status } from "../stores";
</script>

<div class="h-full flex flex-col overflow-hidden">
  <Title title="设备状态显示" />
  <div class="flex-1 flex flex-col justify-center gap-4 overflow-hidden">
    <div class="basis-5/12 flex overflow-hidden justify-between">
      <div class="basis-1/4 w-1/4 aspect-square">
        <DeviceImg status={DeviceStatus.normal} />
      </div>
      <div class="basis-1/4 w-1/4 aspect-square">
        <DeviceImg status={DeviceStatus.warning} />
      </div>
      <div class="basis-1/4 w-1/4 aspect-square">
        <DeviceImg status={DeviceStatus.error} />
      </div>
      <div class="basis-1/4 w-1/4 aspect-square">
        <DeviceImg status={DeviceStatus.offline} />
      </div>
    </div>
    <div class="basis-5/12 flex overflow-hidden">
      <div class="basis-1/4">
        <DeviceTarget
          status={DeviceStatus.normal}
          label="正常"
          value={$status.normal}
        />
      </div>
      <div class="basis-1/4">
        <DeviceTarget
          status={DeviceStatus.warning}
          label="告警"
          value={$status.warning}
        />
      </div>
      <div class="basis-1/4">
        <DeviceTarget
          status={DeviceStatus.error}
          label="异常"
          value={$status.error}
        />
      </div>
      <div class="basis-1/4">
        <DeviceTarget
          status={DeviceStatus.offline}
          label="离线"
          value={$status.offline}
        />
      </div>
    </div>
  </div>
</div>

<style>
  .border-14424b {
    border-color: #14424b;
  }
</style>
